<template>
  <div class="flex justify-center py-16">
    <div class="flex flex-col space-y-4 rounded-lg bg-white p-8 bg-opacity-60 backdrop-blur-md">
      <h4 class="text-center text-2xl tracking-widest">注册设计师</h4>
      <form @submit.prevent="handleSubmit(!v$.$invalid)" class="flex flex-col space-y-4">
        <div>
          <div class="p-inputgroup">
            <span class="p-inputgroup-addon">
              <i class="far fa-user"></i>
            </span>
            <InputText
              id="name"
              v-model="v$.name.$model"
              placeholder="真实姓名"
              :class="{ 'p-invalid': v$.name.$invalid && submitted }"
            />
          </div>
          <small v-if="(v$.name.$invalid && submitted) || v$.name.$pending" class="p-error">真实姓名不能为空</small>
        </div>
        <div>
          <div class="p-inputgroup">
            <span class="p-inputgroup-addon">
              <i class="far fa-venus-mars"></i>
            </span>
            <Dropdown
              id="gender"
              v-model="v$.gender.$model"
              :options="[
                { name: '男' },
                { name: '女' }
              ]"
              option-label="name"
              option-value="name"
              :class="{ 'p-invalid': v$.gender.$invalid && submitted }"
            />
          </div>
        </div>
        <div>
          <div class="p-inputgroup">
            <span class="p-inputgroup-addon">
              <i class="far fa-phone"></i>
            </span>
            <InputText
              id="phone"
              v-model="v$.phone.$model"
              placeholder="手机号码"
              :class="{ 'p-invalid': v$.phone.$invalid && submitted }"
            />
          </div>
          <small v-if="(v$.phone.$invalid && submitted) || v$.phone.$pending" class="p-error">手机号码不能为空</small>
        </div>
        <div>
          <div class="p-inputgroup">
            <span class="p-inputgroup-addon">
              <i class="far fa-memo"></i>
            </span>
            <InputText
              id="description"
              v-model="v$.description.$model"
              placeholder="自我简介"
              :class="{ 'p-invalid': v$.description.$invalid && submitted }"
            />
          </div>
          <small v-if="(v$.description.$invalid && submitted) || v$.description.$pending" class="p-error">自我简介不能为空</small>
        </div>
        <div>
          <div class="p-inputgroup">
            <span class="p-inputgroup-addon">
              <i class="far fa-school"></i>
            </span>
            <Dropdown
              id="education"
              v-model="v$.education.$model"
              :options="edu"
              option-label="name"
              option-value="did"
              :class="{ 'p-invalid': v$.education.$invalid && submitted }"
            />
          </div>
        </div>
        <div>
          <div class="p-inputgroup">
            <span class="p-inputgroup-addon">
              <i class="far fa-memo"></i>
            </span>
            <InputText
              id="description"
              v-model="v$.experience.$model"
              placeholder="从业经验"
              :class="{ 'p-invalid': v$.experience.$invalid && submitted }"
            />
          </div>
        </div>
        <div>
          <div class="p-inputgroup">
            <span class="p-inputgroup-addon">
              <i class="far fa-school"></i>
            </span>
            <InputText
              id="description"
              v-model="v$.school.$model"
              placeholder="毕业院校"
              :class="{ 'p-invalid': v$.school.$invalid && submitted }"
            />
          </div>
        </div>
        <div>
          <div class="p-inputgroup">
            <span class="p-inputgroup-addon">
              <i class="far fa-graduation-cap"></i>
            </span>
            <InputText
              id="description"
              v-model="v$.profession.$model"
              placeholder="专业"
              :class="{ 'p-invalid': v$.profession.$invalid && submitted }"
            />
          </div>
        </div>
        <div class="flex space-x-2 items-center">
          <Checkbox
            id="accept"
            name="accept"
            value="Accept"
            v-model="v$.accept.$model"
            :class="{ 'p-invalid': v$.accept.$invalid && submitted }"
          />
          <label for="accept" :class="{ 'p-error': v$.accept.$invalid && submitted }">我同意《时尚轻纺设计师协议》</label>
        </div>
        <Button type="submit" label="注 册" class="p-mt-2" />
      </form>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'DesignerRegister',
})
</script>

<script lang="ts" setup>
import { defineComponent, reactive, ref } from 'vue'
import { required, sameAs, and, not } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core'
import { register } from '@/api/designer/designer'
import { useToast } from 'primevue/usetoast'

import Dropdown from 'primevue/dropdown'
import InputText from 'primevue/inputtext/InputText.vue'
import Button from 'primevue/button'
import Checkbox from 'primevue/checkbox/Checkbox.vue'

let toast = useToast()

const state = reactive({
  name: '',
  gender: '男',
  phone: '',
  description: '',
  education: 25,
  experience: '',
  school: '',
  profession: '',
  accept: null,
})
let notNull = not(sameAs(false))

const rules = {
  name: { required },
  gender: { required },
  phone: { required },
  description: { required },
  education: { required },
  experience: { },
  school: { },
  profession: { },
  accept: { required, shouldBeChecked: and(notNull) },
}

const edu = [
  { did: 25, name: '其他' },
  { did: 26, name: '大专' },
  { did: 27, name: '本科' },
  { did: 28, name: '研究生' },
]

const v$ = useVuelidate(rules, state)

const submitted = ref(false)

const handleSubmit = (isFormValid: boolean) => {
  submitted.value = true;

  if (!isFormValid) {
    return;
  }
  success()
}

function success() {
  register({
    name: v$.value.name.$model,
    gender: v$.value.gender.$model,
    phone: v$.value.phone.$model,
    description: v$.value.description.$model,
    education: {
      did: v$.value.education.$model
    },
    profession: v$.value.profession.$model,
    experience: v$.value.experience.$model,
    school: v$.value.school.$model,
  })
    .then(() => {
      toast.add({ severity: 'success', summary: '注册成功', detail: '即将跳转到登录页...', life: 3000 })
      setTimeout(() => {
        window.location.href = '/login'
      }, 1000)
    })
    .catch((err) => {
      toast.add({ severity: 'error', summary: '注册失败', detail: err.data.msg, life: 3000 })
    })
}
</script>